<template>
  <div class="course-item">
    <el-image class="course-item-img" :src="item.iconUrl" fit="cover" />
    <div class="mt-8px">{{ item.name }}</div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style lang="scss" scoped>
.course-item {
  display: flex;
  width: 172px;
  font-size: 16px;
  line-height: 23.17px;
  letter-spacing: 0;
  color: #444;
  flex-direction: column;
  align-items: center;
  
  .course-item-img{
    width:100%;
    height:90px;
  }
}
</style>
